<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script src="js/china.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>



    <script src="js/commom.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=bVhXlaPpURqYlnO4C5kljjS8plbjyqTr">
        //v3.0版本的引用方式:src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
    </script>
    <script src="js/LuShu_min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.js"></script>
    <title>顺和物联统一调度平台</title>
    <link rel="stylesheet" href="css/fourLevels.css">
</head>

<body>
    <div class="page">
        <div class="title">
            <div class="titleTxt">顺和物联统一调度平台</div>
            <div class="time">
                <div id="showTime"></div>
                <!-- <div id="localtime"></div> -->
                <script type="text/javascript">
                    function showLocale(objD) {
                        var str, colorhead, colorfoot;
                        var yy = objD.getYear();
                        if (yy < 1900) yy = yy + 1900;
                        var MM = objD.getMonth() + 1;
                        if (MM < 10) MM = '0' + MM;
                        var dd = objD.getDate();
                        if (dd < 10) dd = '0' + dd;
                        var hh = objD.getHours();
                        if (hh < 10) hh = '0' + hh;
                        var mm = objD.getMinutes();
                        if (mm < 10) mm = '0' + mm;
                        var ss = objD.getSeconds();
                        if (ss < 10) ss = '0' + ss;
                        var ww = objD.getDay();

                        str = yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
                        //alert(str);
                        return str;
                    }

                    function tick() {
                        var today;
                        today = new Date();
                        document.getElementById("showTime").innerHTML = showLocale(today);
                        window.setTimeout("tick()", 1000);
                    }
                    tick();
                </script>

            </div>
        </div>

        <div class="content" id="app">
            <div class="order">
                <div class="orderDetails">
                    <div class="orderContent">
                        <div class="boxTitle">
                            <div>运单号:{{result.order_sn}}</div>
                            <div>受理时间:{{result.create_time}}</div>
                            <div>
                                订单类型:{{result.order_type==1?'三方':result.order_type==2?'tms':result.order_type==3?'仓储':'取货郎'}}
                            </div>

                        </div>
                        <div class="boxContent">
                            <div style="color: #e7da1d; font-size: 1vw;">收发货人信息</div>
                            <div class="message">
                                <div>
                                    <div class="first">发货人:{{result.sender_name}}</div>
                                    <div class="second">发货人电话:{{result.sender_mobile}}</div>
                                    <div class="txt">发货人地址:{{result.sender_address}}</div>
                                </div>
                                <div>
                                    <div class="first">收货人:{{result.receiver_name}}</div>
                                    <div class="second">收货人电话:{{result.receiver_mobile}}</div>
                                    <div class="txt">收货人地址:{{result.receiver_address}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="boxContent">
                            <div style="color: #e7da1d; font-size: 1vw;">货物信息</div>
                            <div class="messages">

                                <div>名称:{{goodsArr.goods_name}}</div>
                                <div>重量:{{goodsArr.goods_weight}}{{goodsArr.goods_spec}}</div>
                                <div>体积:{{goodsArr.goods_volume}}m³</div>
                                <div>件数:{{goodsArr.goods_num}}{{goodsArr.goods_pack}}</div>
                            </div>
                        </div>
                        <div class="boxContent">
                            <div style="color: #e7da1d; font-size: 1vw;">增值服务信息</div>
                            <div class="messages">
                                <div>是否提货:{{tihuo==1?"是":"否"}}</div>
                                <div>是否回单:{{result.is_huidan==1?"是":"否"}}</div>
                                <div>是否送货:{{result.is_delivery==1?"是":"否"}}</div>
                            </div>
                        </div>
                        <div class="boxContent">
                            <div style="color: #e7da1d; font-size: 1vw;">运费信息</div>
                            <div class="messages">
                                <div>运费:{{result.total_price}}</div>
                                <div>保费:{{result.bj_price}}</div>
                                <div>代收款:{{result.ds_price}}</div>
                                <div>提货费:{{result.take_delivery}}</div>
                                <div>送货费:{{result.delivery_price}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="orderState">
                    <div class="stateContent">
                        <div v-for="(item, index) in result.location_str" :key="index">
                            <div class="line" v-show="index>0"></div>
                            <div class="stateline">
                                <div class="circle"></div>
                                <div>{{item.status}}：</div>
                                <div class="stateBox">
                                    <div>{{item.msg}}</div>
                                    <div>操作人：{{item.operator}} 操作时间：{{item.time}}</div>
                                </div>
                            </div>

                        </div>

                        <!-- <div class="stateline">
                            <div class="circle"></div>
                            <div>运输中:</div>
                            <div class="stateBox">
                                <div>运单由鲁A12345进行承运</div>
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="stateline">
                            <div class="circle"></div>
                            <div>已到达:</div>
                            <div class="stateBox">
                                <div>运单由北京网点进行到车操作</div>
                                <div>操作人:苗震 操作时间:2020-10-9 14:50:00</div>
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="stateline">
                            <div class="circle"></div>
                            <div>已卸车:</div>
                            <div class="stateBox">
                                <div>运单由苗震进行卸车</div>
                                <div>操作人:苗震 操作时间:2020-10-10 9:30:00</div>
                            </div>
                        </div> -->
                    </div>
                    <div class="stateVideo">
                        <div class="videoLeft">
                            <div class="videotitle">
                                装车图片
                            </div>
                            <div class="videoImgBox">

                                <img v-if="imgUrl.length>0" class="videoImg" :key="index" v-for="(item, index) in imgUrl" :key="index" :src="imgUrl[index]" alt="">
                                <div v-else>
                                    <img class="videoImg" src="images/mr.png" alt="">
                                    <img class="videoImg" src="images/mr.png" alt="">

                                </div>


                            </div>
                        </div>
                        <div class="videoRight">
                            <div class="videotitle">卸车图片</div>
                            <!-- <div class="video"></div> -->
                            <div class="videoImgBox">
                                <img v-if="imgUrl2.length>0" class="videoImg" :key="index" v-for="(item, index) in imgUrl2" :key="index" :src="imgUrl2[index]" alt="">

                                <div v-else>
                                    <img class="videoImg" src="images/mr.png" alt="">
                                    <img class="videoImg" src="images/mr.png" alt="">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="map" id="map">

                <!-- <img class="mapImg" src="/images/map.png" alt=""> -->
            </div>
        </div>
    </div>
</body>

</html>
<script>
    var a = GetReques();
    //console.log(a)
    function GetReques() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
            }
        }
        return theRequest;
        // console.log(theRequest)
    }
    new Vue({
        el: '#app',
        data: {
            // message: "20201023",

            result: [],
            imgUrl: [

            ],
            imgUrl2: [],
            tihuo: '',
            goodsArr: []
        },
        // onshow: function () {
        //    this.GetRequest();

        // },
        mounted: function() {
            // getQueryString("id")
            // this.getsInfo();

            this.getData()
        },
        methods: {
            // show: function (item) {
            //     if (!item.isShow) {
            //         this.$set(item, 'isShow', false)
            //         item.isShow = !item.isShow
            //     } else {
            //         item.isShow = !item.isShow
            //     }

            // },




            getData: function() {
                var _data = a

                // console.log(_data)
                var that = this
                $.ajax({

                    /***********初始化获取全部设备坐标********/
                    url: API_SERVER_URL + "order_info",
                    type: 'POST',
                    // contentType: 'application/json',
                    // header: {
                    //     //'Content-type': 'application/x-www-form-urlencoded'
                    //     //"content-type":"application/json"
                    //      "Access-Control-Allow-Origin": '*'
                    // },
                    // contentType: "application/json; charset=utf-8",
                    datatype: 'jsonp',
                    data: _data,
                    success: function(data) {
                        console.log(data.data)

                        that.result = data.data
                        that.goodsArr = that.result.goods[0]
                        if (that.result.goods.length == '0') {
                            alert("暂无数据")
                        } else {
                            that.goodsArr = that.result.goods[0]
                        }
                        // console.log(that.goodsArr)
                        that.imgUrl = data.data.up_car_img
                        that.imgUrl2 = data.data.down_car_img
                        if (that.result.take_delivery == 0.00) {
                            that.tihuo = 1

                        }
                    },
                    error: function(e) {
                        console.log(e)
                    }
                })

            }
        },
    })

    var map;

    function getMap() {
        var locations = [];
        var _data = {
                carNum: a.value,
                orderType: a.orderType
            }
            // var _data = {
            //     status: 'A'
            // }
        var that = this
        $.ajax({

            /***********初始化获取全部设备坐标********/
            url: API_SERVER_URL + "car_location",
            type: 'POST',
            // contentType: 'application/json',
            // header: {
            //     'Content-type': 'application/x-www-form-urlencoded'
            //     //"content-type":"application/json"
            //      //"Access-Control-Allow-Origin": '*'
            // },
            //contentType: "application/json; charset=utf-8",
            datatype: 'jsonp',
            data: _data,
            success: function(data) {
                // console.log(data.data.location)
                that.locations = data.data.location
                    //  console.log(that.locations)

                //创建地图
                map.centerAndZoom(new BMap.Point(that.locations[0].lon, that.locations[0].lat), 12);

                var arr = that.locations
                    // console.log(arr)
                var myP1 = new BMap.Point(arr[0].lon, arr[0].lat); //arr
                var myP2 = new BMap.Point(arr[arr.length - 1].lon, arr[arr.length - 1].lat); //终点

                var myIcon = new BMap.Icon("images/hc3.png", new BMap.Size(120, 50), { //小车图片
                    //offset: new BMap.Size(0, -5),    //相当于CSS精灵
                    imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
                });
                map.enableScrollWheelZoom();
                map.centerAndZoom(new BMap.Point(arr[0].lon, arr[0].lat), 13);
                var lushu;
                // 实例化一个驾车导航用来生成路线
                var drv = new BMap.DrivingRoute('临沂', {
                    onSearchComplete: function(arr) {
                        if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
                            var plan = arr.getPlan(0);
                            var arrPois = [];
                            for (var j = 0; j < plan.getNumRoutes(); j++) {
                                var route = plan.getRoute(j);
                                arrPois = arrPois.concat(route.getPath());
                            }
                            map.addOverlay(new BMap.Polyline(arrPois, {
                                strokeColor: '#00bd01'
                            }));
                            map.setViewport(arrPois);

                            lushu = new BMapLib.LuShu(map, arrPois, {
                                defaultContent: "", //"从天安门到百度大厦"
                                autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                                icon: new BMap.Icon("images/hc3.png", new BMap.Size(120, 50), {
                                    anchor: new BMap.Size(27, 13)
                                }),
                                speed: 500,
                                enableRotation: false, //是否设置marker随着道路的走向进行旋转
                                landmarkPois: [

                                ]
                            });
                            lushu.start();
                        }
                    }
                });
                var start = new BMap.Point(arr[0].lon, arr[0].lat); //arr
                var end = new BMap.Point(arr[arr.length - 1].lon, arr[arr.length - 1].lat); //终点
                drv.search(start, end);


                // function $(element) {
                //     return document.getElementById(element);
                // }

                //绑定事件


                // marker.addEventListener("click", function () {
                //     marker.enableMassClear();   //设置后可以隐藏改点的覆盖物
                //     marker.hide();

                //     //map.clearOverlays();  //清除所有覆盖物
                // });



                // var driving2 = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: false } });    //驾车实例
                // driving2.search(myP1, myP2, arr);    //显示一条公交线路

                // window.run = function (arr) {

                //    var driving = new BMap.DrivingRoute(map);    //驾车实例

                //     // var driving = new BMap.DrivingRoute(map, {
                //     //     renderOptions: { map: map, autoViewport: true },

                //     // });  

                //     driving.search(myP1, myP2);
                //     driving.setSearchCompleteCallback(function () {
                //         var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
                //         var paths = pts.length;    //获得有几个点

                //         var carMk = new BMap.Marker(pts[0], { icon: myIcon });

                //         map.addOverlay(carMk);

                //         i = 0;
                //         function resetMkPoint(i) {
                //             carMk.setPosition(pts[i]);
                //             if (i < paths) {
                //                 setTimeout(function () {
                //                     i++;
                //                     resetMkPoint(i);
                //                 }, 100);
                //             }
                //         }
                //         setTimeout(function () {
                //             resetMkPoint(5);
                //         }, 100)


                //     });
                // }

                // setTimeout(function () {
                //     run();
                // }, 1500);
            },
            error: function(e) {
                console.log(e)
            }
        })

    }

    //创建和初始化地图函数:
    function initMap() { ///初始化地图
        createMap();
        setMapEvent(); //设置地图事件
        addMapControl(); //向地图添加控件
        //addMarker(); //向地图中添加marker
        getMap()


    }

    // setInterval(getData, 2000); //定时器
    //创建地图函数:
    function createMap() {
        map = new BMap.Map("map"); //在百度地图容器中创建一个地图
        var point = new BMap.Point(116.249684, 36.569412); //定义一个中心点坐标
        map.centerAndZoom(point, 15); //设定地图的中心点和坐标并将地图显示在地图容器中
        // window.map = map; //将map变量存储在全局
        map.setMapStyleV2({
            styleId: '04ec7db1deb55c04daa364702d68652e'
        });
    }

    //地图事件设置函数:
    function setMapEvent() {
        map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
        map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard(); //启用键盘上下左右键移动地图
    }

    //地图控件添加函数:
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_ZOOM
        });
        map.addControl(ctrl_nav);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrl_sca);
    }


    /*****************************************获取设备信息**************************************************/
    initMap(); //创建和初始化地图
</script>